<template>
  <div>
    <el-form size="small" ref="dataForm" label-width="120px" :model="dataForm" :rules="rules">
      <el-row>
        <el-col :span="span" v-for="item in options" :key="item.prop">
          <el-form-item :label="item.label" :prop="item.prop" :label-width="item.width ? item.width : '120px'" :rules="item.rules">
            <el-select @change="changeOption" v-if="item.type==='select'" :placeholder="item.isEdit? `请选择${item.label}`: ''" :disabled="editType === 'show'" :clearable="item.isClears" filterable v-model="dataForm[item.prop]" style="width:100%">
              <el-option v-for="(op, key, index) of item.option" :label="op" :value="key" :key="index" />
            </el-select>
            <el-input v-if="item.type==='input'" :maxlength="item.len" rows="3" v-model="dataForm[item.prop]" :disabled="editType === 'show'" clearable :placeholder="item.isEdit? `请输入${item.label}`: ''">
            </el-input>
            <el-input v-if="item.type==='textarea'" resize="none" type="textarea" :maxlength="item.len" rows="3" v-model="dataForm[item.prop]" show-word-limit :disabled="editType === 'show'" clearable :placeholder="item.isEdit? `请输入${item.label}`: ''">
            </el-input>
            <el-date-picker v-if="item.type==='datetimerange'" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange" v-model="dataForm[item.prop]" :disabled="editType === 'show'" clearable>
            </el-date-picker>
            <el-radio-group v-if="item.type==='radio'" v-model="dataForm[item.prop]" :disabled="editType === 'show'" :placeholder="item.isEdit? `请输入${item.label}`: ''">
              <el-radio v-for="(op, key) of item.option" :key="key" :label="key">{{op}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-if="isTag">
            <ul :class="['tag-list', editType === 'show' ? 'dis-bg' : '']" @click="clickTagUser('tag')">
              <li class="tag-item" v-for="(item, index) of listValue" :key="index">{{item.labelName}}</li>
            </ul>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-if="isUser">
            <ul :class="['tag-list', editType === 'show' ? 'dis-bg' : '']" @click="clickTagUser('user')">
              <li class="tag-item" v-for="(item, index) of listValue" :key="index">{{item.realName}}({{item.userName}})</li>
            </ul>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-if="isOrg">
            <ul :class="['tag-list', editType === 'show' ? 'dis-bg' : '']" @click="clickTagUser('org')">
              <li class="tag-item" v-for="(item, index) of inList" :key="index">{{item.organizationName}}({{item.organizationCode}})</li>
            </ul>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :offset="16">
        <el-button type=""  @click="closeEdit">
          取消
        </el-button>
        <el-button type="primary"  @click="saveData" v-if="editType !== 'show'">
          <fa-icon class="fa-check" />保存
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
export default {
  name: 'edit-biz',
  props: {
    options: Array,
    initData: Object,
    listValue: Array,
    span: {
      type: Number,
      default: 24
    },
    isTag: {
      type: Boolean,
      default: false
    },
    isUser: {
      type: Boolean,
      default: false
    },
    isOrg: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      dataForm: {},
      rules: {},
      inList: []
    }
  },
  mounted () {
    this.dataForm = { ...this.initData }
    if (this.initData.id) {
      if (this.initData.receiveSett === 'SELECT_ORG') {
        this.getTree()
      }
    }
  },
  methods: {
    getTree () {
      api.getQueryOrgTree().then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let result = this.disposeOrgTree(data, this.listValue)
          this.inList = [...result]
        }
      })
    },
    disposeOrgTree (list, listVal) {
      let res = []
      if (!listVal) return []
      list.forEach(ele => {
        if (listVal.indexOf(ele.organizationId) !== -1) {
          res.push(ele)
        }
        if (ele.childList && ele.childList.length > 0) {
          res.push(...this.disposeOrgTree(ele.childList, listVal))
        }
      })
      return res || []
    },
    // 保存
    saveData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('updataSuccess', this.dataForm)
        }
      })
    },
    changeOption (val) {
      this.$emit('changeSelect', val)
    },
    clickTagUser (type) {
      if (this.editType === 'show') {
        return
      }
      this.$emit('showType', type)
    },
    closeEdit () {
      this.$emit('close')
    }
  },
  watch: {
    initData () {
      this.dataForm = { ...this.initData }
    }
  }
}
</script>
<style lang="less" scoped>
.tag-list{
  width: 100%;
  min-height: 40px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #DCDFE6;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px 0;
  .tag-item{
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid #DCDFE6;
    margin: 0 5px 5px 5px;
    line-height: 22px;
    border-radius: 4px;
  }
}
.dis-bg{
  background: #F5F7FA;
}
</style>
